<!--  -->
<template>
  <div>
    <div class="article-container">
      <!-- 导航栏 -->
      <van-nav-bar class="app-nav-bar" title="高级检索" left-arrow @click-left="$router.back()" />
      
      <van-cell-group v-for="(item,index) in formList" :key="index" class="search">
        <van-col style="width: 20%;">
          <van-dropdown-menu>
            <van-dropdown-item v-model="item.name" :options="option2"/>
          </van-dropdown-menu>
        </van-col>
        <van-col style="width: 65%;">
          <van-search v-model="item.value" placeholder="请输入搜索关键词" input-align="center" left-icon=""/>
        </van-col>
        <van-col style="width: 15%;">
        <van-button v-show="index > 0"  icon="minus" round color="#000000" size="mini" class="btn1" @click="readsearch(index)"></van-button>
        <van-button v-show="index < 5" icon="plus" round type="info" size="mini" class="btn1" @click="addadsearch"></van-button>
      </van-col>
      </van-cell-group>
      
      <div id="date_time_picker" class="van-row" >
        <span  class="van-col van-col--4" style="font-size:16px;margin: 10px 0; ">发表时间:</span>
        <!-- 开始时间 输入框 -->
        <van-field v-model="startValue" placeholder="开始时间" readonly class="van-col van-col--8"  @click="showStartTime()"/>
        <span class="van-col van-col--1" style="font-size:16px;margin: 10px 0; ">至</span>
        <!-- 结束时间 输入框 -->
        <van-field v-model="endValue"  placeholder="结束时间" readonly class="van-col van-col--8" @click="showEndTime()"   />
        <!-- 开始 弹出层 -->
        <van-popup v-model="showStart" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker
              v-model="startTime"
              type="date"
              :max-date="currentTime"
              @confirm="confirmStartFn()"
              @cancel="cancelFn()" />
          </van-popup>
          <!-- 结束 弹出层 -->
          <van-popup v-model="showEnd" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="endTime" type="date"
              :min-date="startTime"
              :max-date="currentTime"
              @confirm="confirmEndFn()"
              @cancel="cancelendFn()" />
          </van-popup>
      </div>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">搜索</van-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: [],
  data() {
    return {
        formList:[{
          value:'',
          name:'主题',
        }],
        option2: [
          {text: '主题', value: '主题'},
          {text: '题名', value: '题名'},
          {text: '作者', value: '作者'},
        ],
        startValue: '',//开始日期输入框默认值
        endValue: '',//结束日期，输入框
        currentTime: new Date(), // 开始时间不能超过当前时间
        startTime: new Date(),// 开始时间
        endTime:   new Date(),// 开始时间
        showStart: false, // 用来显示弹出层
        showEnd:   false
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.timeFormat(new Date());
   },
  methods: {
    addadsearch(){
      this.formList.push({
        value:'',
        name:'主题',
      });
    },
    readsearch(k){
      this.formList.splice(k, 1)
    },
    showStartTime() {
        this.showStart = true;
      },
      showEndTime(){
        this.showEnd = true;
      },
      confirmStartFn() { // 确定按钮
        this.startValue = this.timeFormat(this.startTime);
        this.showStart = false;
      },
      confirmEndFn(){
        this.endValue = this.timeFormat(this.endTime);
        this.showEnd = false;
      },
      cancelFn(){
        this.showStart = false;
      },
      cancelendFn(){
        this.showEnd = false;
      },
      timeFormat(time) { // 时间格式化 2019-09-08
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        return year + '年' + month + '月' + day + '日'
      }
  }
}

</script>
<style lang='less' scoped>
  .search .van-col{
    min-height: 54px !important;
  }
  .btn1{
    margin: 10px 4px;
  }
  /deep/.search .van-search {
    padding: 0.18rem 0.32rem !important;
  }

  /deep/.search .van-dropdown-menu__bar{
    box-shadow:none !important;
  }
</style>